import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import classNames from 'classnames'
import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import DailyBill from './components/DayBill'
import { transDateList, getMoenyCount } from "@/utils";

const Month = () => {
  const { billList } = useSelector(state => state.bill)
  const monthGroup = useMemo(() => {
    return transDateList(billList, 'YYYY-MM')
  }, [billList])
  console.log(monthGroup, 'monthGroup');


  // 日期弹框
  const [dateVisible, setDateVisible] = useState(false)

  // 当前日期
  const [currenDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format('YYYY-MM')
  })

  const [currentMonthList, setMonthList] = useState([])

  // 获取当前月的数据
  useEffect(() => {
    const nowDate = dayjs(new Date()).format('YYYY-MM')
    if (monthGroup[nowDate]) {
      setMonthList(monthGroup[nowDate])
    }
  }, [monthGroup])


  const monthResult = useMemo(() => {
    const pay = getMoenyCount(currentMonthList, 'pay')
    const income = getMoenyCount(currentMonthList, 'income')
    return {
      pay, income, total: pay + income
    }
  }, [currentMonthList])

  const onConfirm = (date) => {
    const formatDate = dayjs(date).format('YYYY-MM')
    setCurrentDate(formatDate)
    setMonthList(monthGroup[formatDate] || [])
  }

  const dayGroup = useMemo(() => {
    const groupDate = transDateList(currentMonthList, 'MM-DD')
    const keys = Object.keys(groupDate)
    return {
      groupDate,
      keys
    }
  }, [currentMonthList])
  console.log(dayGroup);

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header" >
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)} >
            <span className="text">
              {currenDate}月账单
            </span>
            <span className={classNames('arrow', dateVisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={() => setDateVisible(false)}
          />
        </div>

        {/* 单日列表渲染 */}
        {
          dayGroup.keys.map(item =>
            <DailyBill date={item} billList={dayGroup.groupDate[item]} key={item} />
          )
        }

      </div>
    </div >
  )
}

export default Month